<template>
  <div class="Center">
    <zxjtHeader>
      <template v-slot:headerName>我的</template>
    </zxjtHeader>
    <van-tabs v-model="active" color="#EE421B" title-active-color="#EE421B" @click="getTitle">
      <van-tab title="关注的机构">
        <div class="focus-list">
          <van-list v-if="insEmptyFlag" v-model="loading" :finished="insFinished" finished-text="到底啦"
            @load="getFollowInstitution" :offset="50">
            <div class="focus-list-msg" v-for="(item, index) in insList" :key="index"
              @click="goInsPage(item.institutionCode, item.institutionSource)">
              <div class="focus-list-img">
                <img :src="item.institutionLogoUrl + '?x-oss-process=image/resize,m_fixed,h_88,w_88'">
              </div>
              <div class="focus-list-info">
                {{ item.institutionName }}
              </div>
            </div>
          </van-list>
          <div class="focus-empty" v-else>
            <img src="../assets/images/zxjt/empty-noFollow.png" alt="">
          </div>
        </div>
      </van-tab>
      <van-tab title="订阅专栏">
        <div class="follow-list">
          <van-list v-if="scEmptyFlag" v-model="loading" :finished="scFinished" finished-text="到底啦"
            @load="getFollowColumn" :offset="50">
            <div class="follow-list-msg" v-for="(item, index) in scList" :key="index" @click="goScPage(item)">
              <div class="follow-list-img">
                <img :src="item.pictureUrl + '?x-oss-process=image/resize,m_fixed,h_160,w_255'">
                <div class="videoCount" v-if="item.videoCount">
                  <img src="../assets/images/zxjt/video.png">
                   {{ item.videoCount }}
                </div>
              </div>
              <div class="follow-list-info">
                <div class="title">{{ item.briefIntroduction }}</div>
                <div class="time">最近更新：{{ item.createdTime | formatTime }}</div>
              </div>
            </div>
          </van-list>
          <div class="follow-empty" v-else>
            <img src="../assets/images/zxjt/empty-noFollow2.png" alt="">
          </div>
        </div>
      </van-tab>
      <van-tab title="我的收藏">
        <div class="collect-list">
          <van-list v-if="collEmptyFlag" v-model="loading" :finished="collectFinished" finished-text="到底啦"
            @load="getCollect" :offset="50">
            <div class="collect-list-msg" v-for="(item, index) in collectList" :key="index" @click="goLiveRoom(item.scType, item.vid)">
              <div class="collect-list-img">
                <img :src="item.imagUrl + '?x-oss-process=image/resize,m_fixed,h_160,w_255'">
              </div>
              <div class="collect-list-info">
                <div class="title">{{ item.title }}</div>
                <p>{{ item.userAnchor? item.userAnchor.nickname :null}}</p>
                <div class="time">{{ item.crtTime | formatTime }}</div>
              </div>
            </div>
          </van-list>
          <div class="collect-empty" v-else>
            <img src="../assets/images/zxjt/empty-noCollect.png" alt="">
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import zxjtHeader from './compoments/zxjtHeader.vue'
import { getCollectList, getFollowColumnList, getFollowInstitutionList } from '../util/api'
export default {
  components: {
    zxjtHeader
  },
  data() {
    return {
      active: 0,
      tabsMsg: ['关注的机构', '订阅专栏', '我的收藏'],
      insFinished: false,
      scFinished: false,
      collectFinished: false,
      loading: false,
      insPage: 1,//关注的机构页码
      scPage: 1,//订阅专栏页码
      collectPage: 1,//收藏页码
      insList: [],//关注的机构的列表
      scList: [],//订阅专栏列表
      collectList: [], //收藏列表
      collectType: 2,//先查直播间2，再查视频1
      insEmptyFlag: true,//空态页判断 true有数据
      scEmptyFlag: true,
      collEmptyFlag: true,
      insType:1//机构列表 先查1，再查6
    };
  },
  filters: {
    formatTime(time) {
      let date = new Date(time)
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
      return year + '年' + month + '月' + day + '日'
    }
  },
  methods: {
    //获取我的收藏列表
    async getCollect() {
      try {
        this.loading = true
        const dataMsg = await getCollectList(this.collectType, this.collectPage, 10)//先查直播间2
        const { code, data } = dataMsg.data
        if (code == '000000') {
          this.collectList = [...this.collectList, ...data]
          this.loading = false
          this.collectPage++
          if (this.collectList.length == 0 && this.collectType == 1) {
            this.collEmptyFlag = false//修改空态页
          }
        }
        if (data.length < 10 && this.collectType == 2) {
          this.collectType = 1//直播间没数据了，下次查视频了
          this.collectPage = 1
        } else if (data.length < 10 && this.collectType == 1) {
          this.collectFinished = true//都没数据了
          console.log(this.collectList.length);
        }
      } catch (error) {
        console.log(error);
        this.collectFinished = true
        this.loading = false
        this.emptyFlag = false//修改空态页
      }
    },
    //获取订阅专栏列表
    async getFollowColumn() {
      try {
        this.loading = true
        const dataMsg = await getFollowColumnList(this.scPage, 10)
        const { code, data } = dataMsg.data
        if (code == '000000') {
          this.scList = [...this.scList, ...data]
          this.loading = false
          this.scPage++
          if (this.scList.length == 0) {
            this.scEmptyFlag = false//修改空态页
          }
        }
        if (data.length < 10) {
          this.scFinished = true
          console.log('专栏', 111);
        }
      } catch (error) {
        console.log(error);
        this.scFinished = true
        this.loading = false
        this.emptyFlag = false//修改空态页
      }
    },
    //获取关注的机构的列表
    async getFollowInstitution() {
      try {
        this.loading = true
        const dataMsg = await getFollowInstitutionList(this.insType,this.insPage, 10)
        const { code, data } = dataMsg.data
        if (code == '000000') {
          this.insList = [...this.insList, ...data]
          this.loading = false
          this.insPage++
          console.log('机构', this.insPage - 1, this.insList);
          if (this.insList.length == 0) {
            this.insEmptyFlag = false//修改空态页
          }
        }
        if (data.length < 10 && this.insType == 1) {
          this.insType = 6//直播小站的机构
          this.insPage = 1//重置页码
        } else if((data.length < 10 && this.insType == 6)){
          this.insFinished = true
        }
      } catch (error) {
        console.log(error);
        this.insFinished = true
        this.loading = false
        this.emptyFlag = false//修改空态页
      }
    },
    //点击机构跳机构页面
    goInsPage(id,type) {
      let params = {
        path: '/zxjt/institutionPage',
        query: {
          institutionId: id,
          institutionSource: type,
          dzhPage: 'true'
        }
      }
      this.$router.push(params)
    },
    //点击专栏跳专栏页面
    goScPage(item) {
      const params = {
        path: '/zxjt/publicSelection',
        query: {
          tabId: item.tabId,
          laneId: item.laneId,
          dzhPage: 'true'
        }
      }
      this.colDotClick(item.tabName)
      this.$router.push(params)
    },
    //点击收藏跳直播间
    goLiveRoom(type,id) {
      //type  1-视频收藏 2-直播间收藏
      //id type=1是为视频ID，type=2是为房间ID
      if (type == 2) {
        let params = {
          path: `/${this.$channel}/liveRoom/${id}`,
          query: {
            dzhPage:'true'
          }
        }
        this.$router.push(params)
      } else {
        let params = {
          path: `/${this.$channel}/liveBack/${id}`,
          query: {
            dzhPage: 'true'
          }
        }
        this.$router.push(params)
      }
      
    },
    //点击我的Tab打点
    getTitle(name, title) {
      $sensorsTrack('financing_videoZoneTabClick', {
        page_name: '我的',
        tab_name: title
      });
    },
    //点击专栏打点
    colDotClick(columnName) {
      $sensorsTrack('financing_videoZoneColumnClick', {
        page_name: '我的',
        column_name: columnName,
      });
    },
  },
}
</script>

<style scoped lang="less">
.Center {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  margin: 0 auto;
  background-color: #F2F4F8;

  .focus-list,
  .follow-list,
  .collect-list {
    width: 100%;
    height: auto;

    .focus-list-msg {
      width: 100%;
      height: 148px;
      background-color: #ffffff;
      margin-bottom: 2px;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .focus-list-img {
        width: 88px;
        height: 88px;
        margin-left: 24px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .focus-list-info {
        padding-left: 20px;
        width: 100%;
        height: 45px;
        font-size: 32px;
        font-weight: 400;
        color: #262E40;
        line-height: 45px;
      }
    }

    .follow-list-msg,
    .collect-list-msg {
      width: 100%;
      height: 200px;
      background-color: #ffffff;
      margin-bottom: 2px;
      display: flex;
      justify-content: center;
      align-items: center;

      .follow-list-img,
      .collect-list-img {
        width: 255px;
        height: 160px;
        border-radius: 20px;
        overflow: hidden;
        margin-left: 24px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .follow-list-img {
        position: relative;

        .videoCount {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 78px;
          height: 42px;
          background: rgba(51, 51, 51, 0.69);
          border-radius: 8px 0px 16px 0px;
          z-index: 5;
          color: #FFFFFF;
          font-size: 20px;
          display: flex;
          justify-content: space-evenly;
          align-items: center;

          img {
            width: 30px;
            height: 23px;
          }
        }
      }

      .follow-list-info,
      .collect-list-info {
        flex: 1;
        height: 100%;
        margin-left: 20px;
        position: relative;

        .title {
          position: absolute;
          top: 20px;
          width: 433px;
          height: 80px;
          font-size: 28px;
          font-weight: 600;
          color: #262E40;
          line-height: 40px;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }

        p {
          position: absolute;
          font-size: 26px;
          font-weight: 400;
          color: #9AA2B3;
          line-height: 40px;
          bottom: 59px;
        }

        .time {
          position: absolute;
          bottom: 20px;
          width: 325px;
          height: 40px;
          font-size: 26px;
          font-weight: 400;
          color: #9AA2B3;
          line-height: 40px;
          white-space: nowrap;
        }
      }
    }

    .focus-empty,
    .follow-empty,
    .collect-empty {
      width: 490px;
      height: 417px;
      margin: 298px auto;

      img {
        width: 100%;
        height: 100%;
      }
    }

    /deep/ .van-list__finished-text {
      font-size: 25px;
    }

    /deep/ .van-loading__text {
      font-size: 25px;
    }
  }

  // .empty {
  //   display: flex;
  //   justify-content: center;
  //   align-items: center;
  //   margin-top: 20px;

  //   img {
  //     width: 270px;
  //     height: 37px;
  //   }
  // }
  /deep/ .van-tab {
    font-size: 30px;
    font-weight: 400;
    color: #262E40;
    white-space: nowrap;
  }

  /deep/ .van-tabs__line {
    width: 30px;
    height: 6px;
    border-radius: 30%;
    margin-top: 16px;
  }

  /deep/ .van-tabs--line .van-tabs__wrap {
    height: 2.375rem;
  }
}
</style>